<template>

  <div>
    <span class="inputstyle">  新建主目录：  <el-input v-model="mainProjectNmae"></el-input>  <el-button  @click="createMainProject">创建</el-button></span><br>

    <span class="inputstyle">搜索：  <el-input v-model="filtertext"></el-input></span>


    <el-tree :data="projects" :props="defaultProps"   :highlight-current=true  :expand-on-click-node=false node-key="id"
             @current-change="getCurrentProjectDto"
             :filter-node-method="filterNode"
             ref="projectTree"
    >


      <span  slot-scope="{ node, data }">
        <span>{{ node.label }} </span>
        <span>
          <el-button
            type="text"
            size="mini"
            @click="append(data)">
            新增
          </el-button>
        </span>
      </span>
    </el-tree>




    <el-dialog title="新增项目" :visible.sync="createNewFlag">


       <el-input v-model="newProjectName"></el-input>
      <div slot="footer" class="dialog-footer">

        <el-button @click="createNewFlag = false">取 消</el-button>

        <el-button type="primary" @click="saveNewProject">确 定</el-button>
      </div>
    </el-dialog>


  </div>

</template>

<script>
    import {getProject,saveproject,updateproject} from '../../api/shuzhiCompare'
    import vue from 'vue'
    export default {
        name: "projects",
      watch:{
        filtertext(value){
          this.$refs.projectTree.filter(value)
        }
      },
      data(){
          return{
            mainProjectNmae:'',
            filtertext:'',
            defaultProps:{
              children: 'children',
              label: 'name'
            },
            createNewFlag:false,
            tempFather:{},
            projects:[],
            newProjectName:'',

          }
      },
      methods:{

      async  createMainProject(){
          let  newProject = {
            id:0,
            name:'',
            status:1,
            parentId:0,

          }
          newProject.name = this.mainProjectNmae
          await saveproject(newProject).then(res=>{
            //this.tempFather.children.push(res.data)
            this.projects.push(res.data)
          }).catch(err=>{
            this.warn(err.data())
          })

        },


        filterNode(value,data){
          if (!value) return true;
          return data.name.indexOf(value) !== -1;
        },


          initProject(){
            let that = this
            getProject().then(res=>{
              that.projects = res.data
            }).catch(err=>{
              that.warn(err.data)
            })
          },
        append(data){

          this.tempFather = data
          console.log("=append==")
          console.log(data)
          this.createNewFlag = true

        },

       async saveNewProject(){
         let  newProject = {
              id:0,
              name:'',
              status:1,
              parentId:0,


          }

          newProject.name = this.newProjectName
          newProject.parentId= this.tempFather.id;
         if (!this.tempFather.children){
           vue.$set(this.tempFather, 'children', []);
         }



          this.createNewFlag = false
         await saveproject(newProject).then(res=>{
            this.tempFather.children.push(res.data)
          }).catch(err=>{
            this.warn(err.data())
         })


        },
        getCurrentProjectDto(value1,value2){

          console.log(value1)
          console.log(value2)



        },



        warn(message) {
          this.$alert(message, '标题名称', {
            confirmButtonText: '确定',
            callback: action => {
              this.$message({
                type: 'info',
                message: `action: ${ action }`
              });
            }
          });
        },

      },
      created(){
        this.initProject()
      }


    }
</script>

<style scoped>

  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;

    font-size: 14px;
    padding-right: 8px;
  }
  .inputstyle >>> .el-input {
    position: relative;
    display: inline-block;
    width: 50%
  }
</style>
